<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0.rc2/echarts.min.js"></script><body>

<div id="main" style="width: 600px;height:400px;"></div>


<script type="text/javascript">

    $(
        function () {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            var total = 0;
            var loaned =  0;

            //通过ajax获取每一行
            $.post('GetStatistics.do', {
            }, function (ret) {
                //解析ret
                ret = eval("(" + ret + ")");

                if (ret['error'] === 0) {
                    total =  parseInt(ret['data']['total']);
                    loaned = parseInt(ret['data']['loaned']);

                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '借出归还统计'
                        },
                        tooltip: {},
                        legend: {
                            data:['数量']
                        },
                        xAxis: {
                            data: ["已借出","未借出"]
                        },
                        yAxis: {},

                        series: [{
                            name: '数量',
                            type: 'bar',
                            data: [loaned, total-loaned],
                            itemStyle:{
                                normal:{
                                    color: function (params){
                                        var colorList = ['#ef5350','#2196f3'];
                                        return colorList[params.dataIndex];
                                    }
                                }
                            }
                        }]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                }
                else {
                    var errorInfo = ret['errorInfo'];
                    alert("获取数据失败！" + errorInfo);
                }
            });



        }
    );





    function backToMenu() {
        window.location.href = '../menu.jsp';
    }
</script>
</body>
</html>